

// 获取元素 

// 绑定事件 
//事件处理函数
//  添加或者删除类名

const box1 = document.getElementById('box1');
const btns = box1.querySelectorAll('ul > li');
const contents = box1.querySelectorAll('ol > li');

for(let i=0;i<btns.length;i++){
    btns[i].onclick = function(){
        
        for(let j=0;j<btns.length;j++){
            btns[j].classList.remove('active');
            contents[j].classList.remove('active');
        }
        btns[i].classList.add('active');
        contents[i].classList.add('active');

    } 
}


const box2 = document.getElementById('box2');
const btns2 = box2.querySelectorAll('ul > li');
const contents2 = box2.querySelectorAll('ol > li');

for(let i=0;i<btns2.length;i++){
    btns2[i].onclick = function(){
        
        for(let j=0;j<btns2.length;j++){
            btns2[j].classList.remove('active');
            contents2[j].classList.remove('active');
        }
        btns2[i].classList.add('active');
        contents2[i].classList.add('active');

    } 
}
